<template>
  <el-row style="display: flex;align-content: flex-start;flex-wrap: wrap;padding: 5px">
    <el-col :span="8" v-for="(o, index) in note" :key="index" :offset="index > 0 ? 2 : 0"
            style="width: 45vw;height:35vh;margin-left: 5px;margin-bottom: 20px;margin-right: 5px;">
      <el-card :body-style="{ padding: '0px' }">
        <img v-show="isEdit" src="../assets/images/icon/delete.png"
             style="width: 20px; height: 20px;margin: 1vh 1vh 0 38vw;position: absolute;z-index: 1"
             @click="deleteNote(o)"/>
        <div @click="goNoteDetail(o.id)">
          <img :src="o.img" class="image" style="height: 185px;width: 170px; opacity: 0.75;"/>
          <span
              style="font-size: 16px;opacity: 0.75;font-weight: bold;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: block;height: 30px;line-height: 30px;padding-left: 10px">
                  {{ o.title }}
          </span>
        </div>
        <div style="padding: 3px 6px 3px 6px;">
          <div class="bottom clearfix">
            <div v-show="!isDraft" style="display: inline-flex">
              <img :src="o.userImg" class="image"
                   style="height: 22px;width: 22px;display: inline-block;border-radius: 50%">
              <p style="font-size: 8px;display: inline-block;padding: 0 0 0 5px;line-height: 22px">{{ o.userName }}</p>
            </div>
            <div style="float: right; padding: 3px 0;display: inline-flex">
              <img v-show="!isDraft && o.isLiked" src="../assets/images/icon/dz-1.png" alt=""
                   style="width: 16px; height: 16px" @click="like(o,0)"/>
              <img v-show="!isDraft && !o.isLiked" src="../assets/images/icon/dz-0.png" alt=""
                   style="width: 16px; height: 16px" @click="like(o,1)"/>
              <p v-show="!isDraft" style="font-size: 12px;display: inline-block;padding: 0 5px 0 5px;">{{
                  o.likeNum
                }}</p>
              <img v-show="isEdit" src="../assets/images/icon/edit.png" style="width: 16px; height: 16px"
                   @click="goNoteEdit(o.id)" />
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import {Dialog} from "vant";

export default {
  props: {
    note: {
      type: Array,
      required: true,
      default: [],
    },
    isEdit: {
      type: Boolean,
      required: false,
      default: false,
    },
    isDraft: {
      type: Boolean,
      required: false,
      default: false,
    }
  },
  methods: {
    goNoteEdit(id) {
      this.$router.push({
        path: '/publish', query: {
          id: id
        }
      });

    },
    goNoteDetail(id) {
      if (!this.isDraft) {
        this.$router.push({
          path: '/noteDetail', query: {
            id: id
          }
        });
      }
    },

    deleteNote(note) {
      Dialog.confirm({
        title: '删除' + (this.isDraft ? '草稿' : '笔记'),
        message: '确认删除《' + note.title + '》吗？',
        theme: 'round-button',
      }).then(() => {
        this.http.get("/api/hyc/note/delete?noteId=" + note.id).then(() => {
          this.note.splice(this.note.indexOf(note), 1);
        })
      }).catch(() => {
      });

    },

    like(note, type) {
      let url = `/api/lj/note/like?noteId=${note.id}&type=${type}`;
      this.http.get(url).then(() => {
        if (type === 0) {
          note.likeNum = note.likeNum - 1;
          note.isLiked = false;
        } else {
          note.likeNum = note.likeNum + 1;
          note.isLiked = true;
        }
      })

    },
  }
}
</script>

<style scoped>
.bottom {
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
